<template>
  <span class="ant-input-group-wrapper">
    <span class="ant-input-wrapper ant-input-group">
      <a-input-number v-model:value="value" :precision="precision" :disabled="props.isEdit" />
      <span v-show="isAddonShow" class="addon">RMB</span>
    </span>
  </span>
</template>

<script setup>
import { ref, watch } from 'vue'

const emits = defineEmits(['update:inputValue'])
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  },
  inputValue: {
    type: Number
  },
  isAddonShow: {
    type: Boolean,
    default: true
  },
  precision: {
    type: Number,
    default: 0
  }
})
const value = ref(props.inputValue)

watch(
  () => props.inputValue,
  val => {
    value.value = val
  }
)
watch(
  () => value.value,
  val => {
    emits('update:inputValue', val)
  }
)
</script>

<style scoped lang="less">
.addon {
  color: @black-85p;
  background-color: #fafafa;
  border: 1px solid @normal-color;
  border-left: none;
  padding: 6px 12px 5px;
  margin-left: -1px;
}
</style>
